<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>客户系统</el-breadcrumb-item>
			<el-breadcrumb-item>网络追踪</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<!-- 表单 -->
			<el-form :inline="true" v-bind:model="formInline" class="demo-form-inline">
				<el-form-item label="名称">
					<el-input v-model="formInline.StudentName" placeholder="请输入名称"></el-input>
				</el-form-item>
				<el-form-item label="跟踪方式">
					<el-select v-model="formInline.FollowType" placeholder="请选择跟踪方式">
						<el-option label="全部" value=""></el-option>
						<el-option label="面谈" value="面谈"></el-option>
						<el-option label="电话" value="电话"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit" round>搜索</el-button>
				</el-form-item>
			</el-form>
			<!-- 表格 -->
			<el-table  @cell-dblclick="handle"   :data="tableData" border style="width: 100%">
				<el-table-column prop="Id" label="编号">
				</el-table-column>
				<el-table-column prop="StudentName" label="姓名">
				</el-table-column>
				<el-table-column prop="FollowTime" label="跟踪时间">
				</el-table-column>
				<el-table-column prop="Content1" label="内容">
				</el-table-column>
				<el-table-column prop="NextFollowTime" label="下次跟踪时间">
				</el-table-column>
				<el-table-column prop="FollowType" label="跟踪方式">
				</el-table-column>
				<el-table-column prop="FollowState" label="回访情况">
				</el-table-column>
				<el-table-column prop="UserName" label="跟踪人">
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
			 :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper " :total="count">
			</el-pagination>
			<!-- 详情 -->
			<el-dialog title="详情" :visible.sync="dialogXiangFormVisible" @close="Xiangdialogclosed">
				<el-form :model="Xiangform" ref="XiangFormRef">
					<el-form-item label="学生姓名" prop="StudentName" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.StudentName" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="跟踪时间" prop="FollowTime" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.FollowTime" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="内容" prop="Content1" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.Content1" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="下次跟踪时间" prop="NextFollowTime" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.NextFollowTime" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="跟踪方式" prop="FollowType" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.FollowType" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="回访情况" prop="FollowState" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.FollowState" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="跟踪人" prop="UserName" :label-width="formLabelWidth">
						<el-input v-model="Xiangform.UserName" auto-complete="off"></el-input>
					</el-form-item>
				</el-form>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formInline: {
					StudentName: "",
					FollowType: ""
				},
				page: 1,
				limit: 5,
				count: 0,
				formLabelWidth: "120px",
				Xiangform:{},
				dialogXiangFormVisible:false,
				tableData: []
			}
		},
		created() {
			this.getTableList();
		},
		methods: {
			handle(row, column, event, cell) {
			        this.dialogXiangFormVisible = true;
			        this.Xiangform = row;
			      },
			async getTableList() {
				const {
					data: res
				} = await this.$http.get('api/WangLuo/GetList', {
					params: {
						page: this.page,
						limit: this.limit,
						StudentName: this.formInline.StudentName,
						FollowType: this.formInline.FollowType
					}
				})
				this.count = res.count;
				this.tableData = res.data;
			},
			handleSizeChange(val) {
				this.limit = val;
				this.getTableList()
			},
			Xiangdialogclosed(){
				this.$refs.XiangFormRef.resetFields()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getTableList()
			},
			onSubmit() {
				this.getTableList()
			},
			async Delete(Id){
				const confirmResult = await this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err =>err)
				if(confirmResult!='confirm'){
					this.$message.info("已取消删除")
				}else{
					const {data:res}= await this.$http.post('api/WangLuo/Delete',{Id})
					if(res.code==-1){
						this.$message.error("删除失败")
					}else{
						this.$message.success("删除成功")
						this.getTableList()
					}
				}
			},
		}
	}
</script>

<style>
	.el-dialog {
		width: 100%;
	}
</style>
